<template>
    <h4>1.个人信息（遍历对象{}）</h4>
    <ul>
      <li v-for="(value, key, index) in info" :key="key">{{ value }}-{{ key }}-{{ index }}</li>
    </ul>
    <h4>2.遍历数字number</h4>
    <ul>
      <li v-for="(num, index) in 3" :key="num">{{ num }}-{{ index }}</li>
    </ul>
    <h4>3.遍历数组</h4>
    <ul>
      <li v-for="item in items" :key="item.id">
        <input type="checkbox" :checked="item.checked" @change="toggleCheckbox(item)" />
        {{ item.name }}
      </li>
    </ul>
    <h4>4.v-for和template结合使用</h4>
    <template v-for="item in items2" :key="item.id">
      <div>
        <h2>{{ item.title }}</h2>
        <p>{{ item.description }}</p>
      </div>
    </template>
  </template>
  
  <!-- <script>
  export default {
    name: 'vfor',
    data() {
      return {
        info: {
          name: '张三',
          age: 18,
          height: 1.88
        },
        items2: [
          { id: 1, title: 'Item 1', description: 'Description for Item 1' },
          { id: 2, title: 'Item 2', description: 'Description for Item 2' },
          { id: 3, title: 'Item 3', description: 'Description for Item 3' }
          // ...更多项目
        ],
        items: [
          { id: 1, name: 'Item 1', checked: true },
          { id: 2, name: 'Item 2', checked: false },
          { id: 3, name: 'Item 3', checked: false }
        ]
      }
    },
    methods: {
      toggleCheckbox(item) {
        item.checked = !item.checked
      }
    }
  }
  </script> -->
  <script setup>
  defineOptions({
    name: 'vfor'
  })
  import { ref, reactive } from 'vue'
  const info = ref({
    name: '张三',
    age: 18,
    height: 1.88
  })
  const items2 = reactive([
    { id: 1, title: 'Item 1', description: 'Description for Item 1' },
    { id: 2, title: 'Item 2', description: 'Description for Item 2' },
    { id: 3, title: 'Item 3', description: 'Description for Item 3' }
  ])
  const items = reactive([
    { id: 1, name: 'Item 1', checked: true },
    { id: 2, name: 'Item 2', checked: false },
    { id: 3, name: 'Item 3', checked: false }
  ])
  function toggleCheckbox(item) {
    item.checked = !item.checked
    console.log('item: ', item)
  }


  </script>
  
  <style lang="scss" scoped></style>
  